<template>
  <div class="checkImg" v-if="showImg">
    <div class="checkImg-content">
      <div class="img" @click="closeImg">
        <img
          ref="resetImg"
          @mousewheel="scrollWheel"
          @mousedown="dragImgMove"
          @mouseup="removeDrag"
          :style="{transform:`scale(${objectStyle.scale}) rotate(${objectStyle.rotate}deg)` }"
          :src="imgListss[imgIndex]"
          alt
        />
      </div>
      <!-- 下方工具栏栏块 -->
      <div class="toolBar_bottom">
        <div class="tools">
          <div class="el-icons">
            <a @click="paper_rotating" title="旋转">
              <i class="el-icon-refresh-right"></i>
            </a>
          </div>
          <div class="el-icons">
            <a @click="bigger" title="放大">
              <i class="el-icon-zoom-in"></i>
            </a>
          </div>
          <div class="el-icons">
            <a @click="little" title="缩小">
              <i class="el-icon-zoom-out"></i>
            </a>
          </div>
          <div class="el-icons">
            <a @click="reset" title="还原">
              <i class="el-icon-refresh"></i>
            </a>
          </div>
          <div class="el-icons" v-if="prveFlag">
            <a @click="prve" title="上一张">
              <i class="el-icon-arrow-left" :style="{opacity:prveDisabled}"></i>
            </a>
          </div>
          <div class="el-icons" v-if="nextFlag">
            <a @click="next" title="下一张">
              <i class="el-icon-arrow-right" :style="{opacity:nextDisabled}"></i>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { dragImgMove, removeDrag } from "../utils/commonMethods.js";
export default {
  name: "checkImg",
  props: ["imgList", "showImg"],
  data() {
    return {
      imgListss: [],
      prveFlag: true, //如果只有一张图片，就不显示上一张，下一张了
      prveDisabled: 1, //是否可以点击
      nextFlag: true,
      nextDisabled: 1,
      showImgss: "",
      imgIndex: 0,
      dotX: false,
      objectStyle: {
        rotate: 0,
        scale: 1
      }
    };
  },
  watch: {
    imgList: {
      deep: true,
      handler: function(val) {
        this.imgListss = val;
        if (this.imgListss.length == 1) {
          this.prveFlag = false;
          this.nextFlag = false;
        }
      }
    }
  },
  methods: {
    paper_rotating() {
      this.objectStyle.rotate += 90;
    },
    bigger() {
      this.objectStyle.scale += 0.2;
    },
    little() {
      this.objectStyle.scale <= 0.3
        ? (this.objectStyle.scale = 0.2)
        : (this.objectStyle.scale -= 0.2);
    },
    reset() {
      this.objectStyle = {
        rotate: 0,
        scale: 1
      };
      this.$refs.resetImg.style = "position:static";
    },
    prve() {
      if (this.imgIndex == 0) {
        this.prveDisabled = 0.5;
        return false;
      } else {
        this.reset();
        this.imgIndex -= 1;
        this.nextDisabled = 1;
        if (this.imgIndex == 0) {
          this.prveDisabled = 0.5;
        }
      }
    },
    next() {
      if (this.imgListss.length <= this.imgIndex + 1) {
        this.nextDisabled = 0.5;
        return false;
      } else {
        this.reset();
        this.imgIndex += 1;
        this.prveDisabled = 1;
        if (this.imgListss.length <= this.imgIndex + 1) {
          this.nextDisabled = 0.5;
        }
      }
    },
    // 鼠标滚动事件
    scrollWheel(event) {
      if (event.wheelDelta) {
        //判断浏览器IE，谷歌滑轮事件
        if (event.wheelDelta > 0) {
          //当滑轮向上滚动时
          if (this.objectStyle.scale >= 5) {
            return false;
          } else {
            this.objectStyle.scale += 0.1;
          }
        }
        if (event.wheelDelta < 0) {
          //当滑轮向下滚动时
          if (this.objectStyle.scale <= 0.3) {
            return false;
          } else {
            this.objectStyle.scale -= 0.1;
          }
        }
      } else if (event.detail) {
        //Firefox滑轮事件
        if (event.detail > 0) {
          //当滑轮向上滚动时
          if (this.scaleNum >= 5) {
            return false;
          } else {
            this.scaleNum += 0.1;
          }
        }
        if (event.detail < 0) {
          //当滑轮向下滚动时
          if (this.scaleNum <= 0.6) {
            return false;
          } else {
            this.scaleNum -= 0.1;
          }
        }
      }
    },
    dragImgMove(e) {
      return dragImgMove(e);
    },
    removeDrag() {
      return removeDrag();
    },
    closeImg(e) {
      //表示不会在点击子元素的时候，触发该事件
      if (e.currentTarget === e.target) {
        this.$emit("sendImgFlag", false);
      }
    }
  },
  mounted() {
    // console.log(this.imgListss.length);
    if (this.imgIndex == 0) {
      this.prveDisabled = 0.5;
    }
  }
};
</script>
<style lang="scss">
.checkImg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 2001;
  overflow: hidden;
  &-content {
    width: 100%;
    height: 100%;
    .img {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      img {
        cursor: move;
        max-width: 1000px;
        max-height: 800px;
        object-fit: contain;
      }
    }
    //下方工具栏
    .toolBar_bottom {
      position: absolute;
      // left: 5px;
      margin: auto;
      border-radius: 10px;
      bottom: 50px;
      left: 50%;
      transform: translate(-50%, 0);
      background-color: rgba(105, 105, 105, 1);
      z-index: 1002;
      .tools {
        width: 280px;
        padding: 12px 8px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .el-icons {
          text-align: center;
          a {
            i {
              color: #fff;
              font-size: 22px;
            }
          }
        }
      }
    }
  }
}
</style>